<template>
  <div class="wrapper">
	  <router-link to='galary' append>
		  <swiper :options="swiperOption" ref="mySwiperA">
			<swiper-slide v-for='item of swiperList' :key='item.id'><img class='swiper_img' :src="item.imgUrl"></swiper-slide>
		  </swiper>
	  </router-link>
	  <div class="desc">
		  <span>2天一晚</span>
		  <span>222张</span>
		  <span>编号：0001</span>
	  </div>
  </div>
</template>
<script>
export default {
  name: 'detailSwipper',
  props:{
	 
  },
  data(){
	  return {
		  swiperOption:{
			  pagination:'.swiper-pagination',
			  loop:true,//是否循环
				autoplay: 3000,//自动切换的时间间隔
				speed:500//切换的速度
		  },
		  swiperList:[
			  {
				  id:'001',
				  imgUrl:'https://pic5.40017.cn/03/000/6c/bb/rBANB1zZO7aAb48cAAEPrLvvCXA058_750x374_00.jpg',
			  },
			  {
				  id:'002',
				  imgUrl:'https://pic5.40017.cn/03/000/a4/1b/rB5oQFz3b-aAIL_QAAI94TGDJ08389_750x374_00.jpg',
			  }
		  ]
	  }
  },
	computed: {
        swiper() {
          return this.$refs.mySwiperA.swiper
        }
    },
  mounted() {
        //console.log("每次切换都会触发我");
        //this.swiper.slideTo(1, 1000, false)
     }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
	position:relative
	.swiper_img
		width:100%
	.desc
		position:absolute
		width:100%
		left:0
		bottom:0.1rem
		z-index:100
		color:#fff
		span
			margin-left:0.2rem
			padding:0.1rem
		span:nth-child(3)
			float:right
			padding:0.1rem
		span:nth-child(2)
			float:right
			margin-right:0.2rem
			background-color:rgba(0,0,0,0.4)
			padding:0.1rem
</style>
